<template>
  <div class="w-full h-full ">
    <div id="paimingchart" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import * as echarts from 'echarts';

const props = defineProps({
  BZlineData: Object
})

const xData = ref([])

onMounted(() => {
  console.log(props.BZlineData)
  xData.value[0] = props.BZlineData.num100
  xData.value[1] = props.BZlineData.num80
  xData.value[2] = props.BZlineData.num60
  xData.value[3] = props.BZlineData.num40
  xData.value[4] = props.BZlineData.num20
  xData.value[5] = props.BZlineData.num0
  init()
})
const init = () => {
  var chartDom = document.getElementById('paimingchart');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      data: ['100%', '80%', '60%', '40%', '20%','0%'],
      type: 'category',
    },
    yAxis: {
      axisLine: { //x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#fff',
          width: 0,
          type: 'solid',
        },
      },
    },
    animationDurationUpdate: 100,
    series: [
      {
        data: xData.value,
        type: 'bar',
        itemStyle: {
            color: function(params) {
                var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622'];
                return colorList[params.dataIndex];
            }
        }
      }
    ]
  }
  option && myChart.setOption(option);
}
</script>

<style scoped>

</style>
